<route lang="json5" type="page">
{
  layout: 'tabbar',
  style: {
    navigationBarTitleText: '我的',
  },
}
</route>

<template>
  <view class="profile">
    <!-- 商家信息 -->
    <view class="merchant-info">
      <view class="avatar-section">
        <view class="avatar" style="display: flex; justify-content: center; width: 30%">
          <wd-img :src="avatar" width="120rpx" height="120rpx"></wd-img>
        </view>
        <view class="info-text">
          <text class="name">{{ profileInfo.userinfo.username }}</text>
          <view class="name">
            <view style="display: flex; align-items: center">
              <text style="margin-right: 10rpx; color: #000">
                {{ chargeStore.storeName }}
              </text>
              <wd-img
                src="/static/profile/chage.png"
                width="34rpx"
                height="34rpx"
                @click="clickCharge"
              ></wd-img>
            </view>
            <text class="store-id">门店ID: {{ chargeStore.storeCode }}</text>

            <view class="amount-info">
              <text>待支付金额：</text>
              <text class="amount">{{ unpayAmount }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <wd-action-sheet v-model="show" :actions="actions" @close="close" @select="select" />
    <!-- 订单管理 -->
    <view class="menu-section">
      <view class="section-title">
        <text>我的订单</text>
        <htm-button type="text" @click="handleViewAll">
          <text style="color: #666">全部订单</text>
          <wd-icon name="arrow-right" size="24rpx" color="#666"></wd-icon>
        </htm-button>
      </view>
      <view class="order-types">
        <view
          class="order-type-item"
          v-for="(item, index) in orderTypes"
          :key="index"
          @click="handleOrderType(item, index)"
        >
          <wd-img :src="item.pic" width="48rpx" height="48rpx"></wd-img>
          <text>{{ item.name }}</text>
          <view
            class="order-type-item-count"
            v-if="item.name === '待支付' && orderNumList.notPayCornerData"
          >
            {{ orderNumList.notPayCornerData }}
          </view>
          <view
            class="order-type-item-count"
            v-if="item.name === '待审核' && orderNumList.notAuditCornerData"
          >
            {{ orderNumList.notAuditCornerData }}
          </view>
          <view
            class="order-type-item-count"
            v-if="item.name === '待发货' && orderNumList.notShipCornerData"
          >
            {{ orderNumList.notShipCornerData }}
          </view>
          <view
            class="order-type-item-count"
            v-if="item.name === '待收货' && orderNumList.notRevievrCornerData"
          >
            {{ orderNumList.notRevievrCornerData }}
          </view>
          <view
            class="order-type-item-count"
            v-if="item.name === '退款/退货' && orderNumList.shcornerData"
          >
            {{ orderNumList.shcornerData }}
          </view>
        </view>
      </view>
    </view>

    <!-- 功能菜单 -->
    <view class="menu-list">
      <view class="menu-item" @click="handleSettings">
        <view class="menu-item-left">
          <wd-img src="/static/profile/setting.png" width="48rpx" height="48rpx"></wd-img>
          <text>设置</text>
        </view>
        <wd-icon name="arrow-right" size="22px" color="#666"></wd-icon>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useProfileStore } from '@/store'
import { useShopcartStore } from '@/store/shopcart'
import { storeToRefs } from 'pinia'
import { toRaw } from 'vue'
import { getStoreUnpayAmount } from '@/service/profile/index'
const profileStore = useProfileStore()
const shopcartStore = useShopcartStore()

const { profileInfo, chargeStore } = storeToRefs(profileStore)

const orderTypes = [
  // { name: '待提交', icon: 'wallet', pic: '/static/profile/goods_return.png' },
  { name: '待支付', icon: 'wallet', pic: '/static/profile/wait_pay.png' },
  { name: '待审核', icon: 'package', pic: '/static/profile/goods_return.png' },
  { name: '待发货', icon: 'package', pic: '/static/profile/wait_shipments.png' },
  { name: '待收货', icon: 'logistics', pic: '/static/profile/wait_receive.png' },
  // { name: '已收货', icon: 'check', pic: '/static/profile/receive.png' }
  { name: '退款/退货', icon: 'return', pic: '/static/profile/goods_return.png' },
]

const show = ref<boolean>(false)
const actions = ref([])

const clickCharge = () => {
  show.value = true
}

function close() {
  show.value = false
}

function select({ item, index }) {
  console.log('index', item)
  shopcartStore.initShopcart(item.storeCode)
  profileStore.setChargeStore(item)

  getStoreUnpayAmount({ storeCode: item.storeCode }).then((res) => {
    unpayAmount.value = res.result.unpayAmount
    orderNumList.value = res.result
  })
}

const avatar = computed(() => profileInfo.value.userinfo.avatar)
const unpayAmount = ref(0)
const orderNumList = ref({})
onShow(() => {
  actions.value = profileInfo.value.userinfo.chargeStore.map((item) => {
    return {
      name: item.storeName,
      storeName: item.storeName,
      storeCode: item.storeCode,
      unpayAmount: item.unpayAmount,
    }
  })
  getStoreUnpayAmount({ storeCode: chargeStore.value.storeCode }).then((res) => {
    unpayAmount.value = res.result.unpayAmount
    orderNumList.value = res.result
    console.log(orderNumList)
  })
})
// 处理查看全部订单
const handleViewAll = () => {
  uni.navigateTo({
    url: '/pages/order/order',
  })
}

// 处理订单类型点击
const handleOrderType = (item: any, index) => {
  if (index === 4) {
    uni.navigateTo({
      url: `/pages/after-sale/after-sale?type=${item.name}`,
    })
  } else {
    uni.navigateTo({
      url: `/pages/order/order?type=${item.name}`,
    })
  }
}

// 处理设置
const handleSettings = () => {
  uni.navigateTo({
    url: '/pages/setting/setting',
  })
}
</script>

<style lang="scss" scoped>
:deep(.data-v-82a7a455 .wd-popup--bottom) {
  bottom: 80rpx;
}
.profile {
  min-height: 100vh;
  padding-bottom: 40rpx;
  background-color: #f7f7f7;
}

.merchant-info {
  padding: 40rpx 30rpx;
  margin-bottom: 20rpx;
  background-color: #fff;

  .avatar-section {
    display: flex;
    // align-items: center;
    margin-bottom: 30rpx;

    .info-text {
      margin-left: 30rpx;

      .name {
        display: block;
        margin-bottom: 10rpx;
        font-size: 36rpx;
        // font-weight: bold;
      }

      .store-info {
        display: flex;
        flex-direction: column;
        font-size: 24rpx;
        color: #666;

        .store-id {
          margin-top: 22rpx;
        }
      }
    }
  }

  .amount-info {
    margin-top: 22rpx;
    font-size: 32rpx;

    .amount {
      // font-weight: bold;
      color: #000;
    }
  }
}

.menu-section {
  padding: 30rpx;
  margin-bottom: 20rpx;
  background-color: #fff;

  .section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30rpx;

    text {
      font-size: 32rpx;
      font-weight: bold;
    }

    .wd-button {
      height: 40rpx;
      color: #999;

      text {
        font-size: 24rpx;
        font-weight: normal;
      }
    }
  }

  .order-types {
    display: flex;
    justify-content: space-between;

    .order-type-item {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      .order-type-item-count {
        position: absolute;
        top: 0;
        right: 0;
        width: 30rpx;
        height: 30rpx;
        font-size: 22rpx;
        line-height: 30rpx;
        color: #fff;
        text-align: center;
        background-color: #e93b3d;
        border-radius: 50%;
      }

      text {
        margin-top: 16rpx;
        font-size: 24rpx;
        color: #333;
      }
    }
  }
}

.menu-list {
  background-color: #fff;

  .menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx;
    border-bottom: 2rpx solid #f5f5f5;

    .menu-item-left {
      display: flex;
      align-items: center;

      text {
        margin-left: 20rpx;
        font-size: 28rpx;
        color: #333;
      }
    }

    .wd-icon {
      color: #999;
    }
  }
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  :deep(.wd-img__image) {
    border-radius: 50%;
  }
}

.icon-placeholder {
  width: 40rpx;
  height: 40rpx;
  background-color: #e93b3d;
  border-radius: 4rpx;
}

.icon-placeholder-small {
  width: 32rpx;
  height: 32rpx;
  background-color: #e93b3d;
  border-radius: 4rpx;
}
</style>
